<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理员登录</title>
</head>

	<body>
		<script>
		var userForm = null;
		var userFormValidator = null;
		
		$(document).ready(function(){
			
			$("#usernameField").focus();
			
			$('#loginForm').validate({
	            errorElement: 'span', //default input error message container
	            errorClass: 'help-block', // default input error message class
	            focusInvalid: false, // do not focus the last invalid input
	            rules: {
	                username: {
	                    required: true
	                },
	                password: {
	                    required: true,
	                    rangelength: [5, 16]
	                },
	                remember: {
	                    required: false
	                }
	            },

	            messages: {
	                username: {
	                    required: "请输入帐号"
	                },
	                password: {
	                    required: "请输入密码",
	                    rangelength : "密码的范围{0}~{1}"
	                }
	            },

	            invalidHandler: function (event, validator) { //display error alert on form submit   
	                $('.alert-error', $('#loginForm')).show();
	            },

	            highlight: function (element) { // hightlight error inputs
	                $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group
	            },

	            success: function (label) {
	                label.closest('.form-group').removeClass('has-error');
	                label.remove();
	            },

	            errorPlacement: function (error, element) {
	                error.insertAfter(element.closest('.input-icon'));
	            },

	            submitHandler: function (form) {
	                form.submit();
	            }
	        });

	        $('#loginForm input').keypress(function (e) {
	            if (e.which == 13) {
	                if ($('#loginForm').validate().form()) {
	                    $('#loginForm').submit();
	                }
	                return false;
	            }
	        });
			
		});
		
		function closeErrorMsg() {
			$("#errorMsg").hide(500);
		}
		</script>
	
		<s:form id="loginForm" cssClass="login-form" action="login" namespace="/admin" method="post" cssStyle="display: block;">
			<h3 class="form-title">登录到您的帐户</h3>
			
			<div id="errorMsg" class="alert <s:if test="!invalidUser">hide</s:if>">
				<button type="button" class="close" data-dismiss="alert" style="margin-top: 5px;" onclick="closeErrorMsg()"></button>
				<span>帐号或密码错误.</span>
			</div>
			<div class="form-group" style="height: 45px; ">
				<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
				<label class="control-label visible-ie8 visible-ie9">帐号</label>
				<div class="input-icon">
					<i class="icon-user"></i>
					<input class="form-control placeholder-no-fix" type="text" 
						style="width: 100%;"autocomplete="off" 
						placeholder="帐号" name="username" id="usernameField" >
				</div>
			</div>
			<div class="form-group" style="height: 45px;">
				<label class="control-label visible-ie8 visible-ie9">密码</label>
				<div class="input-icon">
					<i class="icon-lock"></i>
					<input class="form-control placeholder-no-fix" type="password" 
						style="width: 100%;" 
						autocomplete="off" placeholder="密码" name="password">
				</div>
			</div>
			<div class="form-actions">
				<label class="checkbox">
<%-- 				<div class="checker"><span><input type="checkbox" name="remember" value="1"></span></div> 记住我 --%>
				</label>
				<button type="submit" class="btn btn-info pull-right">
				登录
				</button>            
			</div>
		</s:form>
	</body>
</html>